<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">开庭信息</div>
        </div>
        <div class="info-wrap fxn-margin-b-20" v-for="(item,index) in courtData" :key="index">
            <div class="info-button">
                <el-button v-if="authMenu('sys_case_detail_court_confirm') && item.confirm_status == 0" type="success" plain icon="Check" @click="handleConfirm(1,item)">确定开庭</el-button>
                <el-button v-if="authMenu('sys_case_detail_court_edit') && item.confirm_status == 0" type="primary" plain icon="Edit" @click="handleEdit(item)">修改</el-button>
                <el-button v-if="authMenu('sys_case_detail_court_cancel') && item.confirm_status == 0" type="danger" plain icon="Close" @click="handleConfirm(2,item)">取消</el-button>
            </div>
            <el-descriptions :column="3" border>
                <el-descriptions-item label="开庭状态">{{$filter.confirmStatus(item.confirm_status)}}</el-descriptions-item>
                <el-descriptions-item label="开庭律师">{{item.lawyers}}</el-descriptions-item>
                <el-descriptions-item label="承办助理">{{item.lawyers_assistant}}</el-descriptions-item>
                <el-descriptions-item label="开庭时间">{{$filter.dateTime(item.court_time)}}</el-descriptions-item>
                <el-descriptions-item label="开庭次数">{{$filter.formatData(item.court_count,'court_count')}}</el-descriptions-item>
                <el-descriptions-item label="开庭城市">{{item.court_city}}</el-descriptions-item>
                <el-descriptions-item label="开庭法院">{{item.court_name}}</el-descriptions-item>
                <el-descriptions-item label="应到处所">{{item.count_place}}</el-descriptions-item>
                <el-descriptions-item label="服务内容">{{$filter.formatData(item.service_content,'service_content')}}</el-descriptions-item>
                <el-descriptions-item label="开庭方式">{{$filter.formatData(item.service_mode,'court_method')}}</el-descriptions-item>
                <el-descriptions-item label="补贴金额">{{item.pay_price}}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{item.create_with}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{$filter.dateTime(item.create_time,1)}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="备注">{{item.count_description}}</el-descriptions-item>
                <el-descriptions-item label="附件">
                    <span v-for="(list,key) in item.files" :key="key">
                        <i v-if="list.xext == 'jpg' || list.xext == 'png'" class="iconfont icon-picture fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'pdf'" class="iconfont icon-pdf fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'docx' || list.xext == 'xlsx' || list.xext == 'pptx'" class="iconfont icon-document fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <el-icon v-if="list.xext == 'rar' || list.xext == 'zip'" size="24" @click="handleFile(list.xurl)"><Files /></el-icon>
                    </span>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-if="item.is_cancel == 1" :column="3" border>
                <el-descriptions-item label="取消原因">{{item.cancel_reason}}</el-descriptions-item>
                <el-descriptions-item label="取消人">{{item.cancel_with}}</el-descriptions-item>
                <el-descriptions-item label="取消时间">{{$filter.dateTime(item.cancel_time,1)}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <el-empty v-if="courtData.length == 0" description="暂无数据" />

        <!-- 修改 -->
        <courtForm v-model:opDialog="courtDialog" :staticData="staticData" :editData="editData" @handleSubmit="handleSubmit"></courtForm>
        <!-- 修改 End -->
    </div>
</template>

<script>
    import dialogForm from '../../Common/Form.vue'
    import courtForm from '../Common/courtForm.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {dialogForm,courtForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 1,
                page: 1,
                perPage: 10,
                loading: false,
                courtData: [],

                //修改
                courtDialog: false,
                editData: {},
                staticData: {
                    title: '添加开庭信息',
                    width: 800,
                    lawcase_id: '',
                    type: 2,
                },
            })

            //获取开庭信息
            const getList = () => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/courts',{
                    page: state.page,
                    perPage: state.perPage,
                    lawcase_id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.courtData = data.list;
                    }
                })
            }

            //打开修改
            const handleEdit = (item) => {
                proxy.$http.get('/oa/Lawcase/courtForm',{id: item.id})
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        //格式化附件
                        let files = [];
                        if(data.files){
                            let array = data.files;
                            for (let index = 0; index < array.length; index++) {
                                let obj = {
                                    name: array[index].name,
                                    url: array[index].xkey,
                                }
                                files.push(obj);
                            }
                        }
                        data.files = files;
                        //格式化判断时间
                        data.lawyer_id = data.lawyer_id.split(',').map(Number);
                        data.lawyer_assistant_id = data.lawyer_assistant_id.split(',').map(Number);
                        data.court_time = proxy.$filter.dateTime(data.court_time,1);
                        state.staticData.lawcase_id = data.lawcase_id;
                        state.editData = data;
                        state.courtDialog = true;
                    }
                })
            }

            //提交修改
            const handleSubmit = () => {
                getList(state.page,state.perPage);
            }

            //确认/取消开庭
            const handleConfirm = (type,item) => {
                //type: 1 == 确认; 2= 取消
                let info = type == 1 ? '确认开庭' : '取消开庭';
                proxy.$confirm("此操作会将该案件"+ info +", 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                    proxy.$http.post('/oa/Lawcase/courtConfirm',{
                        id: item.id,
                        confirm_status: type,
                    })
                    .then(res=> {
                        let { code, msg, data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            proxy.$msg.success('提交成功!');
                            getList(state.page,state.perPage);
                        }
                    })
                })
                .catch(() => {})
            }

            //打开附件
            const handleFile = (file) => {
                window.open(file);
            }

            //格式化状态
            const formatStatus = (item) => {
                let confirm_status = [
                    {value: 0, label: '待开庭'},
                    {value: 1, label: '已开庭'},
                    {value: 2, label: '已取消'},
                ];
                for (let index = 0; index < confirm_status.length; index++) {
                    if(item == confirm_status[index].value){
                        return confirm_status[index].label;
                    }
                }
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleEdit,
                handleSubmit,
                handleConfirm,
                
                //组件方法
                authMenu,
                handleFile,
                formatStatus,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }

    .fxn-detail-info .info-button{
        margin-bottom: 20px;
        text-align: right;
    }
</style>